<template>
  <!-- 需求单详情 -->
  <div>
    <!--信息单 -->
    <div>
      <el-row>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="1"
                        style="font-size : 20px;font : blod;color:black">需求单详情</el-menu-item>
          <span class="but">
            <el-button-group>
              <el-button type="primary"
                         icon="el-icon-arrow-left">上一页</el-button>
              <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
            <el-button plain
                       icon="el-icon-printer ">打印</el-button>
            <el-button plain
                       icon="el-icon-s-order">完成</el-button>
            <el-button plain
                       icon="el-icon-edit">编辑</el-button>
            <el-button type="primary"
                       icon="el-icon-top-left"
                       @click="backtrack()">返回</el-button>
          </span>
        </el-menu>
        <span>
          <font style="font-size : 15px;margin-left:20px">基本信息</font>
        </span>
      </el-row>

      <el-form :inline="true"
               label-position="left"
               label-width="90px"
               :model="formLabelAlign">
        <el-row>
          <el-col :span="7">
            <el-form-item label="产品线:">
              <el-input v-model="formLabelAlign.productLine"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  :offset="1">
            <el-form-item label="采购部门：">
              <el-input v-model="formLabelAlign.category"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  :offset="1">
            <el-form-item label="仓库：">
              <el-input v-model="formLabelAlign.warehouse"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="制单人：">
              <el-input v-model="formLabelAlign.prepared"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  :offset="1">
            <el-form-item label="审核人：">
              <el-input v-model="formLabelAlign.auditor"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  :offset="1">
            <el-form-item label="成色：">
              <el-input v-model="formLabelAlign.fineness"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="制单时间：">
              <el-input v-model="formLabelAlign.makingTime"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  :offset="1">
            <el-form-item label="状态：">
              <el-input v-if="formLabelAlign.status == 1"
                        value="定稿"
                        :disabled="true">
              </el-input>
              <el-input v-if="formLabelAlign.status == 2"
                        value="定稿"
                        :disabled="true">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7"
                  :offset="1">
            <el-form-item label="单号：">
              <el-input v-model="formLabelAlign.orderNumber"
                        disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-menu :default-active="activeIndex"
                   class="el-menu-demo"
                   mode="horizontal"
                   @select="handleSelect">
            <el-menu-item index="1"
                          style="font-size : 15px;color:black">产品信息</el-menu-item>

          </el-menu>

        </el-row>

      </el-form>

    </div>
    <el-menu :default-active="activeIndex"
             class="el-menu-demo"
             mode="horizontal"
             @select="handleSelect">
      <el-menu-item index="1"
                    style="font-size : 15px;color:black">产品信息</el-menu-item>

    </el-menu>
    <div>

      <!-- 产品信息表格 -->
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="goodsCode"
                         label="产品编码"
                         width="200"
                         align="center">
        </el-table-column>
        <el-table-column prop="goodsName"
                         label="产品名称"
                         width="200"
                         align="center">
        </el-table-column>
        <el-table-column prop="supplier"
                         label="供应商"
                         width="200"
                         align="center">
        </el-table-column>
        <el-table-column label="克重范围"
                         width="200"
                         align="center">
          <template slot-scope="scope">
            <el-input style="width: 50px;"
                      v-model="scope.row.gramStart" />
            ~
            <el-input style="width: 50px;"
                      v-model="scope.row.gramEnd" />
          </template>
        </el-table-column>
        <el-table-column prop="weight"
                         label="重量"
                         width="100"
                         align="center">
          <template slot-scope="scope">
            <el-input style="width: 50px;"
                      v-model="scope.row.weight" />
          </template>
        </el-table-column>
        <el-table-column prop="amount"
                         label="数量"
                         width="100"
                         align="center">
          <template slot-scope="scope">
            <el-input style="width: 50px;"
                      v-model="scope.row.amount" />
          </template>
        </el-table-column>
        <el-table-column prop="carft"
                         label="克效果工艺"
                         width="100"
                         align="center">
        </el-table-column>
        <el-table-column prop="specification"
                         label="规格"
                         width="100"
                         align="center">
        </el-table-column>
        <el-table-column label="操作"
                         width="100">
          <template slot-scope="scope">

            <span v-if="formLabelAlign.status == 1">
              待分配
            </span>
            <span v-if="formLabelAlign.status == 3">
              已分配
            </span>
            <span v-if="formLabelAlign.status == 4">
              待采购
            </span>
            <span v-if="formLabelAlign.status == 5">
              已完成
            </span>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="float:right"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="80">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      formLabelAlign: {},
      tableData: [],
      //需求单对象
      requisitionForm: {
        //基本信息对象
        basicInfo: {},
        //产品信息对象
        goodsInfo: {},
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  methods: {
    //分页
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val
    },
    //第几页
    handleCurrentChange(val) {
      this.pageNum = val
    },
    //分页查找
    selectByPage() {
      var id = this.$route.query.id
      this.axios
        .get(this.baseUrl + 'requisitionForm/findRequisitionFormById', {
          params: {
            id: id,
          },
        })
        .then((res) => {
          console.log(res.data.data)
          this.requisitionForm = res.data.data
          this.formLabelAlign = res.data.data.basicInfo
          this.tableData = res.data.data.goodsInfo
        })
    },
    //返回按钮
    backtrack() {
      this.$router.push({ name: 'demandList' })
    },
  },
  created() {
    this.selectByPage()
  },
}
</script>

<style scoped>
.but {
  float: right;
}
</style>